<template>
  <div class="preview_img" :style="{ 'width': width + 'px', 'height': height + 'px' }">
    <el-image fit="fill" class="w-100 h-100" :src="$globalObj.imgBaseUrl + imgUrl">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline" />
      </div>
    </el-image>
    <p v-if="imgUrl" class="mask_tool text-center pointer" @click.stop="showViewer = true">
      查看
    </p>
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[$globalObj.imgBaseUrl + imgUrl]" />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: { ElImageViewer },
  props: {
    width: {
      type: Number,
      default: 95
    },
    height: {
      type: Number,
      default: 95
    },
    imgUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showViewer: false
    }
  },
  methods: {
    // 关闭预览
    closeViewer() {
      this.showViewer = false
    }
  }
}
</script>

<style lang="scss" scoped>
.preview_img {
  position: relative;
  border: 1px solid #e6e6e6;

  &:hover .mask_tool {
    display: block;
  }

  .mask_tool {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
  }
}
</style>
